<template>
<div>
  <div class="img"></div>
  <div class="flex-container" style="width:200px;height: 200px;background-color: pink;margin-bottom: 20px;">
    <div style="margin-left: 10px;background-color: red;height: 30px;"></div>
    <!-- <div></div> -->
  </div>
  <div style="width:200px;height: 200px;background-color: pink">
    <div style="margin-left: 10px;background-color: red;height: 30px;"></div>
  </div>
</div>

</template>

<script>
export default {
  name: 'cssTest'

}
</script>

<style>
.flex-container {
  display: flex;
  height: 200px;
}
div.img {
  background-color: red;
  background: red url("https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64")  no-repeat center/ contain  ;
  /* background-repeat:no-repeat;
  background-attachment: fixed;
  background-position: 50px 50px;
  width: 300px; */
  width: 64px;
  height: 100px;;
}

</style>